<script setup>
import { reactive, ref, onMounted } from "vue";
import axios from "axios";
import { useI18n } from "vue-i18n";
const I18n = useI18n();
const { locale } = useI18n();
const imgRef = ref();

const state = reactive({
  picList: ["/img/v2_smiszt.jpg", "/img/v2_smit1l.jpg"],
  slideHeight: 500,
});

//跑马灯提供的change事件，会返回当前索引和上一次索引，
//根据索引，每次手动触发时候，动态获取和设置高度
const slideChange = (current) => {
  countImgHeight(current);
};
// 获取图片换算后高度，赋值给轮播
const countImgHeight = (index) => {
  const img = new Image();
  img.onload = function () {
    const realHeight = img.height;
    const realWidth = img.width;
    const height = (Number(realHeight) * window.innerWidth) / Number(realWidth);
    state.slideHeight = height;
  };
  img.src = state.picList[index];
};
//初始调用一次
countImgHeight(0);

const bannerList = ref([]);
const getBanner = async () => {
  try {
    const res = await axios.get(`${apiUrl}/pc/get_banner`, {
      headers: {
        "Authori-zation": `Bearer ${getToken()}`,
      },
    });

    if (res.data.status === 200) {
      bannerList.value = res.data.data.list;
    }
  } catch (e) {}
};

const enBannerList = ref([]);
const getEnBanner = async () => {
  try {
    const res = await axios.get(`${apiUrl}/pc/get_en_banner`, {
      headers: {
        "Authori-zation": `Bearer ${getToken()}`,
      },
    });

    if (res.data.status === 200) {
      enBannerList.value = res.data.data.list;
    }
  } catch (e) {}
};

onMounted(() => {
  getBanner();
  getEnBanner();
});
</script>
<template>
  <el-carousel
    :height="state.slideHeight + 'px'"
    :autoplay="false"
    :motion-blur="true"
    loop
    ref="carouselRef"
    @change="slideChange"
  >
    <el-carousel-item
      v-for="(item, index) in locale === 'zh-cn' ? bannerList : enBannerList"
      :key="index"
    >
      <img
        ref="imgRef"
        :src="item.image"
        @click="goto(item.url)"
        style="width: 100%; height: 100%"
        alt=""
      />
    </el-carousel-item>
  </el-carousel>
</template>
